
import { Component } from "react";

class Counter extends Component {
    state = {
        value : 1 
    }
    constructor(props){
        super(props);
        console.log( 'Counter构造器执行' );
    }
    static getDerivedStateFromProps( props , state ) {
        console.log( 'Counter.getDerivedStateFromProps' );
        console.log( 'props: ' , props , ' , state: ' , state );
        return state ;
    }
    render(){
        console.log( "Counter#render" );
        return (
            <div className="counter" >
                <button onClick={this.handler}>{this.state.value}</button>
            </div>
        );
    }
    // 通常可以在 componentDidMount 中完成两项操作
    // 1、可以选择页面上的DOM元素
    // 2、发送异步请求(可以根据请求返回的结果来修改组件的状态)
    componentDidMount(){
        console.log( 'Counter#componentDidMount' );
        let btn = document.querySelector( '.counter>button' );
        console.log( btn );

        // 对于 react 项目来说 public 就是静态文件的根目录
        // 请求当前Web服务器中根目录下的 hello.json 文件
        fetch( '/hello.json' ).then( resp => {
            console.log( resp );
            return resp.json();
        }).then( data => {
            console.log( data );
            setTimeout( ()=>{
                 // this.setState( data );
                this.setState({
                    value: data.value
                });
            } , 3000 );
        }).catch( err => {
            console.log( err );
        })
    }
    handler = ()=>{
        this.setState({
            value: this.state.value + 1 
        });
    }
}

export default Counter ;
